<template>
	<view>
		<form>
			<view class='personal-data' :style="colorStyle">
				<view class='list'>
					<view class="item acea-row row-between-wrapper">
						<view>{{$t(`曲线类型`)}}</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" range-key="name" :range="arrayLabel">
								<view class="uni-input input">{{arrValue}}<text
										class="iconfont icon-xiangyou"></text></view>
							</picker>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>{{$t(`x、y轴类型`)}}</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChangeAxle" range-key="name" :range="axle">
								<view class="uni-input input">{{axleValue}}<text
										class="iconfont icon-xiangyou"></text></view>
							</picker>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>{{$t(`年龄段`)}}</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChangeAge" range-key="name" :range="age">
								<view class="uni-input input">{{ageValue}}<text
										class="iconfont icon-xiangyou"></text></view>
							</picker>
						</view>
					</view>
				</view>
				<view class="verify" @click="queryCurve()">{{$t(`查询曲线`)}}</view>
			</view>	
		</form>
		<view class="charts-box" v-if="uCharsState">
			<Uchars
			type="tline"
			:opts="opts"
			:chartData="chartData"
			:ontouch="true"
			>
			</Uchars>
		 </view>
		 <view class="proportion" v-if="uCharsState">
		 	{{info.field_name}}({{info.y_unit_name}}/{{info.x_unit_name}})
		 </view>
		 <view class="help" v-if="uCharsState" @click="helpChilk()">
		 	帮助指南
		 </view>
	</view>
</template>

<script>
	import Uchars from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import { SingleCurce } from '@/api/baby.js';
	export default {
		components:{
			Uchars
		},
		data() {
			return {
				uCharsState:false,
				info:'',
				chartData: {
					series: []
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
				padding: [25,15,0,0],
				// enableScroll:true,
				dataLabel: false,
				canvas2d:true,
				legend:{
					show:false,
				},
				xAxis: {
				  // scrollShow:true,
				  calibration:false,
				  gridType:'dash',
				  disableGrid: false,
				  itemCount: 5,
				  // labelCount:10,
				},
				extra: {
				  tooltip: {
					  legendShow:false
				  },
				  line: {
					type: "curve",
					width: 1,
					activeType: "solid"
				  }
				},
				yAxis: {
					showTitle:true,
				    gridType: "dash",
					dashLength: 2,
					splitNumber:10,
					data: [
					  {
						tofix:1,
						title:'',
						min: '',
						max: '',
					  }
					]
				 }
				},
				/* 曲线类型 */
				arrValue:'选择曲线类型',
				arrType:'',
				arrayLabel:[{
					name:'百分位',
					type:0
				},{
					name:'标准差法',
					type:1
				}],
				/* x、y轴 */
				axleValue:'请选择x、y轴类型',
				axleType:'',
				axle:[{
					name:'身高/年龄',
					statistics_type:0
				},{
					name:'体重/年龄',
					statistics_type:1
				},{
					name:'头围/年龄',
					statistics_type:2
				},{
					name:'体重/身高',
					statistics_type:3
				},{
					name:'BMI/年龄',
					statistics_type:4
				}],
				/* 年龄段 */
				ageValue:'请选择年龄段',
				ageType:'',
				age:[{
					name:'0-3岁',
					data_type:0
				},{
					name:'2-18岁',
					data_type:1
				}],
				
				baby_id:'',
			}
		},
		onLoad:function(options){
			this.baby_id = options.id
		},
		methods: {
			/* 跳转帮助指南 */
			helpChilk:function(){
				uni.navigateTo({url:'/pages/extension/news_details/index?id=' + this.info.article_cate_id})
			},
			/* 查询曲线 */
			queryCurve:function(){
				let that = this;
				if (that.arrValue == '选择曲线类型') return that.$util.Tips({
					title: that.$t(`请选择曲线类型`)
				});
				if (that.axleValue == '请选择x、y轴类型') return that.$util.Tips({
					title: that.$t(`请选择x、y轴类型`)
				});
				if (that.ageValue == '请选择年龄段') return that.$util.Tips({
					title: that.$t(`请选择年龄段`)
				});
				
				SingleCurce({
					baby_id:that.baby_id,
					type:that.arrType,
					statistics_type:that.axleType,
					data_type:that.ageType
				}).then(res => {

					that.info = res.data
					that.chartData.series = []
					that.opts.yAxis.data[0].min = parseFloat(res.data.min_y) 
					that.opts.yAxis.data[0].max = parseFloat(res.data.max_y) 
					that.opts.yAxis.data[0].title = res.data.y_unit_name
					
					let Color = ['#F09C42','#F3C246','#DF0029','#1B4F93','#511F90','#C57CAC','#00AE72','#00B2BF','#000000','#64004B']
					for (var i = 0; i < res.data.levels_name.length; i++) {
						
						if(res.data.samples_data[res.data.levels_name[i]] && res.data.levels_name[i] in res.data.samples_data){
							const processedData = [];  
							
							
							res.data.samples_data[res.data.levels_name[i]].forEach(item => {  
							    const [x, y] = [parseFloat(item.x, 10), parseFloat(item.y, 10)];  
							    processedData.push([x, y]);  
							});
							
							let obj = {
								pointShape:'none',
								name: res.data.levels_name[i],
								color:Color[i],
								data:processedData
							}
							
							that.chartData.series.push(obj)
						}
					}
					// if(res.data.samples_data['10th'].length != 0 & '10th' in res.data.samples_data){
					// 	const processedData1 = [];  
					// 	res.data.samples_data['10th'].forEach(item => {  
					// 	    const [x, y] = [parseInt(item.x, 10), parseInt(item.y, 10)];  
					// 	    processedData1.push([x, y]);  
					// 	});
					// 	let obj1 = {
					// 		pointShape:'none',
					// 		name: "10th",
					// 		color:'#F3C246',
					// 		data:processedData1
					// 	}
					// 	that.chartData.series.push(obj1)
					// }
					
					
					
					/* 用户自己的记录 */
					if(res.data.user_data.length != 0){
						console.log(34343);
						const user = [];  
						res.data.user_data.forEach(item => {  
						    const [x, y] = [parseInt(item.x, 10), parseInt(item.y, 10)];  
						    user.push([x, y]);  
						});
						let userObj = {
							name: "我的宝宝",
							color:'#FF8FB9',
							data:user
						}
						that.chartData.series.push(userObj)
					}
					
					that.uCharsState = true
					
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
			bindPickerChange: function(e) {
				this.arrValue = this.arrayLabel[e.detail.value].name
				this.arrType = this.arrayLabel[e.detail.value].type
			},
			bindPickerChangeAxle:function(e){
				this.axleValue = this.axle[e.detail.value].name
				this.axleType = this.axle[e.detail.value].statistics_type
			},
			bindPickerChangeAge:function(e){
				this.ageValue = this.age[e.detail.value].name
				this.ageType = this.age[e.detail.value].data_type
			},
		}
	}
</script>

<style lang="scss">
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
   padding: 0 0 32rpx 0;
   background: #FFFFFF;	
   width: 100%;
   height: 400px;
}
.help{
	text-align: center;
	color: #3A62F1;
	padding: 12rpx 0 88rpx 0;
	background: #FFFFFF;
}
.proportion{
	text-align: center;
	width: 100%;
	background: #FFFFFF;
}
.personal-data {
	padding-bottom: 50rpx;
}
.personal-data .list {
	margin-top: 15rpx;
	background-color: #fff;
}

.personal-data .list .item {
	padding: 30rpx 30rpx 30rpx 0;
	border-bottom: 1rpx solid #f2f2f2;
	margin-left: 30rpx;
	font-size: 28rpx;
	color: #282828;
}

.personal-data .list .item .phone {
	width: 160rpx;
	height: 56rpx;
	font-size: 24rpx;
	color: #fff;
	line-height: 56rpx;
	border-radius: 32rpx
}

.personal-data .list .item .pictrue {
	width: 88rpx;
	height: 88rpx;
}

.personal-data .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.personal-data .list .item .input {
	flex: 1;
	text-align: right;
	color: #868686;
	font-size: 28rpx;

	input {
		padding-right: 10rpx;
	}

	.icon-suozi {
		margin-left: 10rpx;
	}
}
.verify{
	margin:  52rpx auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF8FB9;
	color: #FFFFFF;
	width: 556rpx;
	height: 88rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.personal-data .list .item .input .id {
	// width: 180rpx;
}

.personal-data .list .item .input .iconfont {
	font-size: 24rpx;
}
</style>
